<!DOCTYPE HTML>
<html>
  <head>
    <title>login</title>
    <meta charset="UTF-8"/>
    <script src="./js/jquery-1.12.3.min.js"></script>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<style type="text/css">
	.vertical-center{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
	.col-md-6 p{
		height: 50px;
		line-height: 50px;
	}
	.container .col-md-6 .pic{
		width: 66%;
		display: inline-block;
	}
	</style>
  </head>
  <body>
    <div class="container vertical-center">
	<div class="col-md-6 col-md-offset-3">
      <form  th:action="@{/loginvalidate}" method="post">
        <h2 >登录聊天室</h2>
        <p>
        	<input type="text" name="username" id="inputEmail" class="form-control" placeholder="userid" required="required" autofocus="autofocus"/>
        </p>
        <p>
        	<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required="required"/>
        </p>
        <p>
        	验证码：<img th:src="@{/authImg}" width="120" height="40"/> 
       		<input type="text" name="pic" id="pic" class="form-control pic" placeholder="验证码" required="required"/>              
        </p>
        <p> 
        	<button class="btn btn-lg btn-primary btn-block" type="submit">login</button>
        </p>
      </form>
        	
	</div>
    </div> <!-- /container -->
  </body>
</html>
